
// 获取元素对象
var inp1 = document.querySelector('.inp1')
var inp2 = document.querySelector('.inp2')
var inp3 = document.querySelector('.inp3')
var onebtn = document.querySelector('.one')
var twobtn = document.querySelector('.two')


var arr = JSON.parse(localStorage.getItem("data")) || []
// 渲染数据
function show(arr){
    var str= ""
    for(var i=0;i<arr.length;i++){
      str+=` <tbody id="tbody">
      <tr>
          <td>${arr[i].name}</td>
          <td>${arr[i].obj}</td>
          <td>${arr[i].grade}</td>
          <td>
              <button onclick=del(${i})>删除</button>
          </td>
      </tr>         
      </tbody>`
    }
    document.querySelector('#tbody').innerHTML = str
  }
  show(arr)

// 添加数据
onebtn.onclick = function(){
    if(inp1.value==""||inp2.value==""||inp3.value==""){
        alert("请输入内容")
        return
      }
    arr.push({name:inp1.value,
              obj:inp2.value,
              grade:inp3.value})
   
    
  // 持久化存储
    localStorage.setItem("data",JSON.stringify(arr))
    show(arr)

}
// 删除
function del(i){
    arr.splice(i,1)
    show(arr)
    localStorage.setItem("data",JSON.stringify(arr))
  }
  // 查询
  twobtn.onclick = function(){
    var val = inp1.value
    console.log("arr",arr);
    arr = arr.filter(function(item){return item.name.indexOf(val)>-1})
    console.log(arr);
    show(arr)
  //  回复到全部数据
    arr = JSON.parse(localStorage.getItem("data")) || []
  }